<template>
    <div class="about" style="background: #eee">
        <el-button type="primary" @click="commit()">提交</el-button>
        <!-- :check-list.sync="check_list"获取复选框选择得数据  @rowClick="rowClick"-->
        <z-table
            ref="ztableRef"
            :column="column"
            checkbox
            :btnList = 'btnList'
            :check-list.sync="check_list"
            isShowborder
            :data="tableData"
            @getPageNum="getPageNum"
            @modifyValue="modifyValue"
            @getRadio="getRadio"
            @handleSelectionChange="handleSelectionChange"
            @handSelectAll="handSelectAll"
            :maxHeight="500"
            :pageConfig="{
                isShowPage: true,
                currentPage: 1,
                pageSize: 30,
                total: 100,
                pageType: 'complete',
            }"
        >
            <!-- v-slot:operation="slotData" 指定插槽和获取插槽传入得数据 -->
            <template v-slot:operation="slotData">
                <!-- 获取slot传入得数据 -->
                <el-button size="mini" type="primary" @click="edit(slotData.data)">编辑</el-button>
                <el-button size="mini">删除</el-button>
            </template>
            <template v-slot:soltMenu>
                <div>
                    <div style="text-align: right;margin-bottom: 8px;">
                        <el-button size="mini" type="primary" @click="edit(slotData.data)">编xxxxxxxxxxxxxxxxxxxxxxx辑</el-button>
                        <el-button size="mini" type="primary" @click="edit(slotData.data)">编xxxxxxxxxxxxxxxxxxxxxxx辑</el-button>
                        <el-button size="mini" type="primary" @click="edit(slotData.data)">编xxxxxxxxxxxxxxxxxxxxxxx辑</el-button>
                    </div>
                    <div style="margin-bottom: 8px;">
                        <el-button size="mini" type="primary" @click="edit(slotData.data)">编xxxxxxxxxxxxxxxxxxxxxxx辑</el-button>
                        <el-button size="mini" type="primary" @click="edit(slotData.data)">编xxxxxxxxxxxxxxxxxxxxxxx辑</el-button>
                    </div>
                </div>
            </template>
            <template v-slot:soltExpand="slotData1">
                <!-- 获取slot传入得数据 -->
                11111
                <z-table style="margin:10px" :column="column1" index :data="slotData1.data.childrenList"></z-table>
            </template>
        </z-table>

        <z-table
            :column="column1"
            isShowborder
            checkbox
            :data="tableDataEl"
            rowKey="taskId"
            :defaultExpandAll="true"
            :check-list.sync="check_list"
            treeChildren="childrenN"
        ></z-table>
        <!-- <el-table
            :data="tableDataEl"
            style="width: 100%;margin-bottom: 20px;"
            row-key="taskId"
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
            prop="date"
            label="日期"
            sortable
            width="180">
            </el-table-column>
            <el-table-column
            prop="name"
            label="姓名"
            sortable
            width="180">
            </el-table-column>
            <el-table-column
            prop="address"
            label="地址">
            </el-table-column>
        </el-table> -->

        <z-outline style="width: 300px; height: 300px" :data="outlineData" @listEvent="listEvent">
            <template v-slot:operation="slotData">
                <!-- 获取slot传入得数据 -->
                <el-button size="mini" type="primary" @click="edit(slotData.data)">编辑</el-button>
                <el-button size="mini">删除</el-button>
                <p>22222</p>
                <p>333</p>
            </template>
        </z-outline>

        <!-- type值：date，week，month，year，daterange，monthrange，datetime，datetimerange-->
        <z-date
            class="dateSty"
            :dateTime="dateTime"
            :dateConfig="dateConfig"
            @selectTime="selectTime"
        ></z-date>
    </div>
</template>

<script>
    import popVue from './popVue.vue'
    export default {
        name: 'about',
        mounted() {
            //this.$refs.zTableRef.setCurrent(this.tableData[0])
            this.$refs.ztableRef.getElRef().setCurrentRow(this.tableData[1])
        },
        methods: {
            confirmPop (row){
                console.log(row,"row--")
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            handleSelectionChange (obj){
                //console.log(this.$refs.zTableRef.handleSelectionObj,'-----')
                console.log(obj,'handleSelectionChange')
            },
            handSelectAll (obj){
                console.log(obj,'handSelectAll')
            },
            selectTime(val) {
                console.log(val, '返回的时间')
                //请求处理
            },
            edit(row) {
                //获取编辑数据
                console.log(row)
            },
            commit() {
                console.log(this.tableData,"tabledata---")
                this.$refs.ztableRef.clearSelection()
                console.log(this.check_list, '复选框选择得数据')
            },
            rowClick(row, column, event) {
                console.log(row, column, event, '点击某一行')
            },
            getPageNum(currentPage, pageSize) {
                this.pageSize = pageSize
                this.currentPage = currentPage
                this.tableData = [
                    {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄',
                    },
                ]
                console.log(this.pageSize, this.currentPage)
                //TODO 调用接口
            },
            modifyValue(value) {
                console.log(value, '-------')
            },
            listEvent(data) {
                console.log(data, '============')
            },
            getRadio(value) {
                console.log(value, 'radio')
            },
        },
        watch: {
            check_list: {
                handler(value) {
                   // console.log(value, '-')
                },
            },
        },
        data() {
            const self = this
            return {
                btnList:[
                    {
                        type:'dialog',
                        text:'新增',
                        width:"80%",
                        fillType:'primary',
                        onlyOneData:true,//是否只能选择一条数据 非必填
                        disabled (){//非必填 默认false
                            return false
                        },
                        callback: (rows) => {// 非必填
                            //编辑确认
                            console.log("新增rows",rows)
                        },
                        vue:popVue,
                    },
                    {
                        type:'dialog',
                        text:'编辑',
                        onlyOneData:true,
                        // disabled (row){//非必填 默认false
                        //     return false
                        // },
                        callback: () => {// 非必填
                            //编辑确认
                            console.log("编辑",this.check_list)
                        },
                        vue:popVue,
                    },
                    {
                        text:'删除',
                        type:'confirm',//弹框类型 dialog 确认框
                        callback: () => {
                            //confirml类型弹框调用
                            console.log('删除',this.check_list)
                        },
                    },
                    {
                        text:'删除2',
                        type:'confirm',//弹框类型 dialog 确认框
                        callback: () => {
                            //confirml类型弹框调用
                            console.log('删除',this.check_list)
                        },
                    },
                    {
                        text:'删除3',
                        type:'confirm',//弹框类型 dialog 确认框
                        callback: () => {
                            //confirml类型弹框调用
                            console.log('删除',this.check_list)
                        },
                    },
                ],
                column1: [
                    { label: '名称', prop: 'name' },
                    { label: '日期', prop: 'date' },
                    { label: '地址', prop: 'address' },
                ],
                dateTime: ['2022-06-01', '2022-06-03'], //'2022-06-03',
                dateConfig: {
                    title: '选择时间',
                    type: 'datetimerange',
                    format: 'yyyy-MM-dd HH:mm:ss', //HH:mm:ss
                    rangeSeparator: '-',
                    clearable: false,
                    pickerOptions: {
                        // shortcuts: [
                        //     { name: '最近半小时', value: 1 / 2 },
                        //     { name: '最近一小时', value: 1 },
                        //     { name: '最近一天', value: 24 },
                        //     { name: '最近一个月', value: 24 * 30 },
                        //     { name: '最近半年', value: 24 * 30 * 6 },
                        // ],
                        disabledDate: (time) => {
                            return time.getTime() > Date.now()
                        },
                    },
                },
                outlineData: {
                    flex: [2, 4], //flex布局比例
                    maxHeight: 300,
                    title: '概要',
                    list: [
                        {
                            type: 'text', //判断 3.支持插槽  4。支持callback函数
                            name: 'name1',
                            value: 'value1xxxxxxxxxxxxxxxxxxxxxxxxxxx',
                            tip: true, //超出显示省略号加提示
                            event: true,
                        },
                        {
                            type: 'function', //判断 3.支持插槽  4。支持callback函数
                            name: 'name2',
                            value: 'value2',
                            callback: (item) => {
                                return `<a>function-${item.name}</a>`
                            },
                        },
                        {
                            type: 'popover',
                            name: 'name5',
                            value: 'value5',
                            children: [
                                { name: '111sssssss1', value: '1111111' },
                                { name: '222', value: '222' },
                                { name: '333', value: '333' },
                            ],
                        },
                        {
                            type: 'slot', //判断 3.支持插槽  4。支持callback函数
                            name: 'name3',
                            value: 'value3',
                            slot_name: 'operation',
                        },
                    ],
                },
                currentPage: 1,
                pageSize: 10,
                column: [
                    {
                        type: 'function',
                        label: 'URL地址',
                        prop: 'url',
                        width: 200,
                        callback: (row) => {
                            //在callback里面自定义格式
                            //如果type是function  则返回每一行得数据
                            //console.log(row)
                            return `<a href="http://www.baidu.com" >${row.name}</a>`
                        },
                    },
                    {
                        label: '日期1111111111111111111',
                        isTip:true,
                        prop: 'date',
                        showTooltip: true,
                        width: 200,
                        sort: true, //是否排序
                        iconObj:{
                            content:'xxxxxxxxxxxsaaaaaaaaaaaaaxsawwwwwwwww </br> wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww',
                            title:'xx',
                            width:300,
                            iconClass:'el-icon-info'
                        }
                        
                    },
                    {
                        label: '名称2222222222222222222',
                        prop: 'name',
                        width: 100,
                        sort: true,
                        isTip:true
                    },
                    {
                        type:'inputcom',
                        label: '输入框',
                        prop: 'inputname',
                        width: 150,
                    },
                    {
                        type:'selectcom',
                        label: '选择框',
                        prop: 'selectName',
                        isDefaultFirst:true,//是否默认显示第一个
                        list:[
                            {label:'左连接',value:1},
                            {label:'右连接',value:2},
                            {label:'内连接',value:3}
                        ],
                        width: 200
                    },
                    {
                        type: 'radio',
                        label: '可授权',
                        prop: 'status',
                        disabledProp: 'redio',
                        ID: 'id',
                        width: 200,
                        radioList: [
                            { name: '是', value: 1 },
                            { name: '否', value: 0 },
                            { name: '中', value: 2 },
                        ],
                    },
                    {
                        type: 'switch',
                        label: '地址',
                        prop: 'address',
                        showTooltip: true,
                        width: 200,
                    },
                    {
                        label: '性别66666666666666666',
                        prop: 'sex',
                    },
                    {
                        type: 'proportion',
                        label: '占比',
                        prop: 'proportion',
                        width: 150,
                    },
                    {
                        type: 'button',
                        label: '按钮',
                        prop: 'button',
                        width: 150,
                        textList:[
                            {
                                text:'编辑',
                                //title:'测试--------',//非必填 默认取上面的text
                                //width:'80%',//或 300px// 非必填
                                type:'dialog',//弹框类型 dialog 确认框
                                // disabled (row){// 非必填
                                //     if(row.id === 4 ||row.id === 3){
                                //         return true
                                //     }
                                //     return false
                                    
                                // },
                                // callback: (row) => {// 非必填
                                //     //编辑确认
                                //     console.log(row,"此不能编辑")
                                // },
                                vue:popVue,
                            },
                            {
                                text:'删除',
                                type:'confirm',//弹框类型 dialog 确认框
                                callback: (row) => {
                                    //confirml类型弹框调用
                                    self.confirmPop(row) 
                                },
                            },
                            {
                                text:'删除2',
                                type:'confirm',//弹框类型 dialog 确认框
                                callback: (row) => {
                                    //confirml类型弹框调用
                                    self.confirmPop(row) 
                                },
                            }
                        ]
                    },
                    {
                        type: 'slot',
                        prop: 'operation',
                        slot_name: 'operation',
                        label: '操作',
                    },
                ],
                aa:[
                    
                ],
                check_list: [], //复选框勾选得数据
                tableDataEl: [{
                    taskId: 1,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                    taskId: 2,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                    taskId: 3,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄',
                    childrenN: [{
                        taskId: 31,
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                        }, {
                            taskId: 32,
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }]
                    }, {
                    taskId: 4,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                    }],

                    tableData1: [{
                    id: 1,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                    id: 2,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                    id: 3,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄',
                    hasChildren: true
                    }, {
                    id: 4,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                    }],
                tableData: [
                    {
                        id: 1,
                        date: '2016-05-02sssssssssssssssssssssssssssssssssssssssssssssssssssssss',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄',
                        sex: '男',
                        status: 0,
                        redio: true,
                        selectName:'',
                        childrenList:[
                            {
                                date: '2016-05-02',
                                name: '王小虎',
                                address: '上海市普陀区金沙江路 1518 弄',
                                sex: '男',
                                redio:true
                            },
                            {
                                date: '2016-05-04',
                                name: '王小虎',
                                address: '上海市普陀区金沙江路 1517 弄',
                            },
                        ]
                    },
                    {
                        id: 2,
                        date: '2016-05-04',
                        name: '王小虎',
                        selectName:'',
                        address: '上海市普陀区金沙江路 1517 弄',
                        proportion: 56,
                        status: 1,
                    },
                    {
                        id: 3,
                        date: '2016-05-01',
                        name: '王小虎',
                        selectName:'',
                        address: '上海市普陀区金沙江路 1519 弄',
                    },
                    {
                        id: 4,
                        date: '2016-05-03',
                        name: '王小虎',
                        selectName:'',
                        address: '上海市普陀区金沙江路 1516 弄',
                    },
                ],
            }
        },
    }
</script>

<style lang="scss">
    .dateSty {
        position: absolute;
        top: 50%;
        left: 50%;
    }
</style>
